<script setup lang="ts">
import { NH3, NH4, NH5, NIcon, NSpace, useThemeVars } from "naive-ui";
import { IconLed } from "../icon";
import { computed, defineProps, toRef, withDefaults } from "vue";
import { LED_STATE } from "./index";

const themeVars = useThemeVars();

// IProps 定义的常用代码
interface IPorps {
  state: LED_STATE;
  title: string;
  size?: "small" | "medium" | "large";
}
const props = withDefaults(defineProps<IPorps>(), {
  size: "large",
});
const state = toRef(props, "state");

// 计算数据
const isSuccess = computed(() => {
  console.log(`[Led] ${state.value}`);
  return state.value === LED_STATE.SUCCESS;
});
const nIconClass = computed(() => {
  return {
    "tw-text-success-default": isSuccess.value,
    "tw-text-error-default": state.value == LED_STATE.ERROR,
    "tw-text-warning-default": state.value == LED_STATE.WARNING,
  };
});
const iconSize = computed(() => {
  switch (props.size) {
    case "small":
      return 30;
    case "medium":
      return 35;
    case "large":
      return 40;
  }
  return 40;
});
const textNode = computed(() => {
  switch (props.size) {
    case "small":
      return NH5;
    case "medium":
      return NH4;
    case "large":
      return NH3;
  }
  return NH3;
});
</script>

<template>
  <NSpace align="center" class="tw-h-10">
    <NIcon :size="iconSize" :class="nIconClass">
      <IconLed />
    </NIcon>
    <component :is="textNode" class="tw-mb-1.5">{{ props.title }}</component>
  </NSpace>
</template>

<style scoped></style>
